<template>
  <div>
    <!--<mt-search v-model="value" cancel-text="取消"
    placeholder="搜索"></mt-search>-->
    <mySearch></mySearch>
    <div class="menu">
      <div class="item" v-for="item in items" @click="go(item.url)">
        <div>
          <img v-bind:src="item.imgSrc" alt="">
        </div>
        <span>{{item.title}}</span>
      </div>
    </div>
    <draggable :move="getdata" @update="datadragEnd" :clone="cloneFn">
            <div>hha</div>
            <div v-for="item in dragItem" >
              {{item.name}}
            </div>
            <div v-for="item in dragList">{{item.name}}</div>
    </draggable>
    <page></page>
    <div>{{getPage}}</div>
  </div>
</template>
<script>
  import Search from '../../common/search/search.vue'
  import router from '../../../router'
  import Vue from 'vue'
  import draggable from 'vuedraggable'
  import page from '../../common/page/page.vue'
  // import { Search } from 'mint-ui';
  Vue.component(Search.name, Search);
  export default {
    name: "homePage",
    components: {
      "mySearch": Search,
      draggable,
      page
    },
    data() {
      return {
        items: [{
          title: "美团购货",
          imgSrc: "https://fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg",
          url: "#/shopping/buy"
        }, {
          title: "暂定",
          imgSrc: "https://fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg",
          url: "new"
        }, {
          title: "暂定",
          imgSrc: "https://fuss10.elemecdn.com/1/c6/8edcaeb8cd35845946db6673660fcjpeg.jpeg",
          url: 'mine'
        }, {
          title: "暂定",
          imgSrc: "https://fuss10.elemecdn.com/0/5e/2a4a05b7a55bab6f22f7404bdaa26jpeg.jpeg",
          url: "mail"
        }],
        value:'fuck',
        dragItem: [{
          name:'aaa'
        },{
          name:'bbb'
        },{
          name:'ccc'
        },{
          name:'ddd'
        }],
        dragList: [{
          name: 'eee'
        }]
      }
    },
    methods: {
      go(url) {
        console.log(url);
        window.location.href = url;
      },
      getdata (evt) {
        console.log(evt.draggedContext.element.id)
      },
      datadragEnd (evt) {
        console.log('拖动前的索引 :' + evt.oldIndex)
        console.log('拖动后的索引 :' + evt.newIndex)
        console.log(this.dragItem)
      },
      cloneFn (original) {
        alert(original)
      }
    },
    computed:{
      getPage () {
        return this.$store.state.page.currents
      }
    }
  }

</script>
<style>
  .menu {
    width: 100%;
    text-align: center;
    overflow: auto;
    margin-top: 10px;
  }
  
  .menu .item {
    height: 100%;
    width: 25%;
    float: left;
    text-align: center;
  }
  
  .menu .item img {
    width: 60%;
  }

</style>
